<template>
  <el-dialog title="创建节点" v-model="isShowDialog" width="600px">
    <el-row :gutter="20" v-for="(formItem, index) in form" :key="index">
      <el-col :span="3">
        <span style="line-height: 32px; white-space: nowrap">{{ formItem.label }}</span>
      </el-col>
      <el-col :span="21"
        ><el-input v-model="formItem.value" :placeholder="formItem.placeholder"></el-input
      ></el-col>
    </el-row>
    <el-button type="primary" style="width: 100%; margin-top: 16px" @click="onSaveBtnClick"
      >保存</el-button
    >
  </el-dialog>
</template>
<script setup lang="ts">
import { defineProps, ref, watch } from 'vue'
import { FormItemInterface } from './FormDialog.dto'

const props = defineProps<{
  show: boolean
  form: Array<FormItemInterface>
}>()

const emits = defineEmits(['submit'])

const isShowDialog = ref(false)

let form = ref<Array<FormItemInterface>>(props.form)

function onSaveBtnClick() {
  emits('submit', form.value)
}

function refresh() {
  form = ref<Array<FormItemInterface>>(props.form)
}

watch(
  () => props.show,
  (now) => {
    isShowDialog.value = now
    refresh()
  },
  {
    immediate: true
  }
)
</script>
<style>
.menu-wrapper {
  position: fixed;
  z-index: 1;
}
</style>
